<template>
	<view class="content">
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular easing-function="linear" :indicator-dots="true" :autoplay="true" :interval="2000"
				:duration="duration">
				<swiper-item class="sitem" v-for="(item, index) in imgList" :key="index">
					<image class="sitem-img" :src="item" :draggable="false"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="tp">
			<image class="logo-pic" mode="heightFix" src="../../static/imgs/logo_pic.png"></image>
			<text class="logo-text">巴比伦台球</text>
		</view>
		<view class="main">
			<view class="hitems">
				<view class="hitem" v-for="item in sections" :key="item.sectionId">
					<view class="hitem-topic" v-if="item.isSectionTopicVisible !== 0">
						<view class="topic-main" v-text="item.sectionMainTopic"></view>
						<view class="topic-sub" v-text="item.sectionSubTopic"></view>
					</view>
					<view class="hitem-main">
						<template v-for="con in item.sectionContents">
							<view class="cake" v-if="con.contentType === 1"  :key="con.contentId" v-text="con.contentText"></view>
							<view class="picc" v-else>
								<image class="pic" mode="widthFix" :src="con.contentImg.url"></image>
							</view>
						</template>
						
					</view>
				</view>
				<view class="hitem">
					<view class="hitem-topic">
						<view class="topic-main">公司地址</view>
					</view>
					<view class="hitem-main">
						<map style="width: 100%; height: 300px;" :markers="markers" :longitude="markers[0].longitude" :latitude="markers[0].latitude"></map>
					</view>
				</view>
				<view class="hitem">
					<view class="hitem-topic">
						<view class="topic-main">咨询内容</view>
						<view class="topic-sub">CONSULT</view>
					</view>
					<view class="hitem-main">
						<feedback></feedback>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import feedback from '../../common/feedback/feedback.vue';
	import { get_home_info, apiBase } from '../../request/index.js';
	export default {
		components : {feedback},
		data() {
			return {
				imgList : [],
				sections : [],
				markers : [
					{
						latitude: 30.614589,
						longitude: 104.166859,
						iconPath: '/static/imgs/pos.png',
						id: 1,
						width: 50,
						height: 50,
						label: {
							content: "巴比伦台球器材",
							fontSize: 16,
							anchorX: -60,
							anchorY: 5,
							color: "#f24e4e"
						}
					}
				]
			}
		},
		methods: {
			async get_home_info () {
				try{
					const result = await get_home_info();
					if(result.success){
						this.imgList = result.data.banners.map(d => apiBase + d.bannerImg.url);
						this.sections = result.data.sections.map(d => {
							d.sectionContents.forEach(x => {
								if(x.contentType === 0){
									x.contentImg.url = apiBase + x.contentImg.url;
								}
							})
							return {...d};
						});
						console.log(this.sections);
					}
				}catch(e){
					//TODO handle the exception
				}
				
			}
		},
		onLoad() {
			this.get_home_info();
		}
	}
</script>

<style>
	
.main-content{
	width: 750rpx;
	height: 100%;
}
	
.uni-margin-wrap{
	width: 100%;
	width: 750rpx;
}
.swiper{
	width: 100%;
	height: 400rpx;
}

.sitem{
	width: 100%;
	height: 100%;
}

.sitem-img{
	width: 100%;
	height: 100%;
}

.tp{
	height: 80rpx;
	background-color: rgb(29, 29, 29);
	line-height: 80rpx;
	text-align: center;
	color: #FFF;
	position: relative;
}

.tp .logo-text{
	vertical-align: middle;
}

.tp .logo-pic{
	height: 40rpx;
	vertical-align: middle;
	margin-right: 10rpx;
}



.main{
	width: 100%;
	box-sizing: border-box;
}
	
.main .cake{
	text-indent: 2em;
	line-height: 55rpx;
}

.main .picc{
	margin: 20px 0;
}	

.main .picc .pic{
	width: 100%;
}

.hitems{
	
}

.hitems .hitem{
	margin-top: 30px;
}

.hitems .hitem .hitem-topic{
	display: flex;
	padding-bottom: 30px;
}

.hitems .hitem .hitem-topic .topic-main{
	width: 200rpx;
	text-align: center;
	line-height: 70rpx;
	height: 70rpx;
	background-color: rgb(51, 51, 51);
	color: #FFF;
	border-radius: 0 35rpx 35rpx 0;
	margin-right: 40rpx;
}

.hitems .hitem .hitem-topic .topic-sub{
	line-height: 70rpx;
	height: 70rpx;
	font-size: 13px;
	color: rgb(156, 156, 156);
}

.hitems .hitem .hitem-main{
	padding: 0 25rpx;
}
</style>
